<template>
  <div class="containerDiv">
    <Layout class="layout">
      <Content class="content">
        <div class="contentContainer">
          <div class="mainButton">
            <Button @click="back">返回</Button>
            <Button @click="submit">完成</Button>
          </div>
          <Row style="height:600px;overflow-y:auto;">
            <Col span="24" class="serviceListContainer">
              <ServiceItemContent
                v-for="(item, index) in ServiceItem"
                :key="index"
                :imgUrl="item.thumb"
                :title="item.title"
                :desc="item.desc"
                :id="item.id"
                :url="item.url"
                class="serviceItem"
              ></ServiceItemContent>
              <div class="pageContainer">
                <Page
                  :total="ServiceItem.length"
                  show-elevator
                  show-total
                  @on-change="pageParams"
                ></Page>
              </div>
            </Col>
          </Row>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script>
import { mapState } from "vuex";
import $ from "jquery";
import ServiceItemContent from "./ServiceItemContent";

export default {
  name: "serviceItemView",
  data() {
    return {
      typeCardStyleObj: {
        height: ""
      },
      typeList: [],
      themeClassList: [],
      type: "",
      themeClass: "",
      name: "",
      page: 1,
      size: 10,
      serviceList: []
    };
  },
  computed: {
    ...mapState({
      ServiceItem: state => state.oneMapConfig.classServices,
      treeData: state => state.oneMapConfig.treeData
    })
  },
  components: { ServiceItemContent },
  methods: {
    getHeight() {
      this.typeCardStyleObj.height = (window.innerHeight - 141) / 2 + "px";
      $(".ivu-card-body")
        .height((window.innerHeight - 141) / 2 - 85)
        .css("overflow-y", "auto");
      $(".serviceListContainer")
        .height(window.innerHeight - 96 - 110)
        .css("overflow-y", "auto");
    },
    pageParams(page) {
      this.page = page;
    },
    back() {
      this.$emit("itemViewState", false);
    },
    submit() {
      let submitData = [];
      this.treeData.forEach(item1 => {
        let temp1 = {};
        if (item1.hasOwnProperty("children")) {
          temp1.children = [];
          temp1.service = [];
          let temp1Array = [];
          let temp1Service = [];
          item1.children.forEach(item2 => {
            let temp2 = {};
            if (item2.hasOwnProperty("children")) {
              temp2.children = [];
              temp2.service = [];
              let temp2Array = [];
              let temp2Service = [];
              item2.children.forEach(item3 => {
                let temp3 = {};
                if (item3.hasOwnProperty("children")) {
                  temp3.children = [];
                  temp3.service = [];
                  let temp3Array = [];
                  let temp3Service = [];
                  item3.children.forEach(item4 => {
                    let temp4 = {};
                    if (item4.hasOwnProperty("children")) {
                      temp4.children = [];
                      let temp4Array = [];
                      item4.children.forEach(item5 => {
                        let temp5 = {};
                        for (let k in item5) {
                          if (
                            k == "render" ||
                            k == "nodeKey" ||
                            k == "expand" ||
                            k == "isShowPopup" ||
                            k == "service"
                          ) {
                            continue;
                          } else if (k == "id") {
                            temp5["serviceInfo"] = item5[k];
                          } else {
                            temp5[k] = item5[k];
                          }
                        }
                        temp4Array.push(temp5);
                      });
                      temp4.children = [].concat(temp4Array);
                      temp4.service = [];
                      for (let k in item4) {
                        if (
                          k == "children" ||
                          k == "render" ||
                          k == "nodeKey" ||
                          k == "service"
                        ) {
                          continue;
                        } else {
                          temp4[k] = item4[k];
                        }
                      }
                      temp3Array.push(temp4);
                    } else {
                      temp4.service = [];
                      for (let k in item4) {
                        if (
                          k == "children" ||
                          k == "render" ||
                          k == "nodeKey" ||
                          k == "service"
                        ) {
                          continue;
                        } else {
                          temp4[k] = item4[k];
                        }
                      }
                      temp3Service.push(temp4);
                    }
                  });
                  temp3.children = [].concat(temp3Array);
                  temp3.service = [].concat(temp3Service);
                  for (let k in item3) {
                    if (
                      k == "children" ||
                      k == "render" ||
                      k == "nodeKey" ||
                      k == "service"
                    ) {
                      continue;
                    } else {
                      temp3[k] = item3[k];
                    }
                  }
                  temp2Array.push(temp3);
                } else {
                  temp3.service = [];
                  for (let k in item3) {
                    if (
                      k == "children" ||
                      k == "render" ||
                      k == "nodeKey" ||
                      k == "service"
                    ) {
                      continue;
                    } else {
                      temp3[k] = item3[k];
                    }
                  }
                  temp2Service.push(temp3);
                }
              });
              temp2.children = [].concat(temp2Array);
              temp2.service = [].concat(temp2Service);
              for (let k in item2) {
                if (
                  k == "children" ||
                  k == "render" ||
                  k == "nodeKey" ||
                  k == "service"
                ) {
                  continue;
                } else {
                  temp2[k] = item2[k];
                }
              }
              temp1Array.push(temp2);
            } else {
              temp2.service = [];
              for (let k in item2) {
                if (
                  k == "children" ||
                  k == "render" ||
                  k == "nodeKey" ||
                  k == "service"
                ) {
                  continue;
                } else {
                  temp2[k] = item2[k];
                }
              }
              temp1Service.push(temp2);
            }
          });
          temp1.children = [].concat(temp1Array);
          temp1.service = [].concat(temp1Service);
          for (let k in item1) {
            if (
              k == "children" ||
              k == "render" ||
              k == "nodeKey" ||
              k == "service"
            ) {
              continue;
            } else {
              temp1[k] = item1[k];
            }
          }
        } else {
          temp1.service = [];
          for (let k in item1) {
            if (k == "render" || k == "nodeKey") {
              continue;
            } else {
              temp1[k] = item1[k];
            }
          }
        }
        submitData.push(temp1);
      });

      this.axios.post("/tree", { treeData: submitData }).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("树服务配置成功！");
        } else {
          this.$Message.info("树服务配置失败！");
        }
      });
    }
  }
};
</script>
<style scoped>
.contentContainer {
  padding: 15px 40px 15px 0;
}
.hrContainer {
  padding: 15px 0;
}
hr {
  color: #e5e5e5;
  border-width: 1px;
}
.serviceItem {
  margin-bottom: 10px;
}
.serviceListContainer {
  padding: 5px 15px;
  height: 200px;
}
.pageContainer {
  text-align: center;
}
.mainButton {
  margin-left: 15px;
}
</style>
